<template>
  <!-- 百人场-luck49-大逃杀详情 -->
  <el-dialog v-if="props.show" :modelValue="props.show" custom-class="detailData" :title="selectToLabel(indexStore.gameArray, props.checkedItem.game_id)+' 详情'" :close-on-click-modal="false"
    :close-on-press-escape="false" @close="onHideDetails">
    <div class="border-box">
      <template v-for="(item,index) in data.filArr" :key="index">
        <div class="flex list" v-if="item.show" >
          <div class="width20"> {{ item.label }} </div>
          <span :class="item.key == 'win_lose'?colorClass(item.value):''">{{ item.value }}</span>
        </div>
      </template>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, watch } from 'vue'
import { setTimestampTime } from '@/utils/time'
import { BigWan, BigMinus } from '@/utils/math'
import { selectToLabel, colorClass } from '@/utils/index'
import { useStore } from '@/stores/index'
const indexStore = useStore()

const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  checkedItem: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const data = reactive({
  filArr: [] as any[],
})

watch(
  () => [props.checkedItem,props.show],
  async (value) => {
    if (value[0] && value[1]) {
      gameDetails()
    }
  },
)

// 详情
const gameDetails = async() => {
  console.log('百人场(luck49 - 大逃杀)详情',props.checkedItem);
  let res = JSON.parse(props.checkedItem.log_json)
  data.filArr = [
    { label: '游戏', value: selectToLabel(indexStore.gameArray, props.checkedItem.game_id), key: 'game_id', show:true },
    { label: props.checkedItem.game_id == 100002?'牌局编号':'下注期数', value: props.checkedItem.round_id_str, key: 'round_id_str', show:true },
    { label: '进入的房间号', value: props.checkedItem.round_id_str, key: 'round_id_str', show: props.checkedItem.game_id == 100002?true:false },
    { label: '下注时间', value: setTimestampTime(res.bet_ts), key: 'bet_ts', show:true },
    { label: '返奖时间', value: setTimestampTime(res.award_ts), key: 'award_ts', show:true },
    { label: '下注数字', value: res.nums, key: 'nums', show:props.checkedItem.game_id == 100003?true:false },
    { label: '开奖数字', value: res.reward_num, key: 'reward_num', show:props.checkedItem.game_id == 100003?true:false },
    { label: '下注前金额', value: BigWan(props.checkedItem.enter_money), key: 'enter_money', show:true },
    { label: '结算后金额', value: BigWan(props.checkedItem.after_settlement_money), key: 'after_settlement_money', show:true },
    { label: '下注金额', value: BigWan(props.checkedItem.bet), key: 'bet', show:true },
    { label: '单个数字赔率', value: BigWan(res.odds)+'%', key: 'odds', show:props.checkedItem.game_id == 100003?true:false },
    { label: '玩家输赢', value: BigMinus(BigWan(props.checkedItem.win), BigWan(props.checkedItem.bet)), key: 'win_lose', show:true },
    { label: '玩家总赢', value: BigWan(props.checkedItem.win), key: 'win', show:true },
  ]
}

// 重置
const emit = defineEmits(['onHideDetails'])
const onHideDetails = () => {
  emit('onHideDetails', false)
}
</script>
<style scoped lang="scss">
.border-box {
  padding-bottom: 40px;
  font-size: 14px;
  color: var(--text);
}

.fily {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  .fily-list {
    width: 50%;
  }
}

.flight {
  width: 100%;
}

.list {
  font-weight: bold;
  height: 36px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--el-border-color-lighter);
}
</style>